<script setup lang="ts">
  import {{ pascal_case }}Table from './{{kebab_case}}-table.vue';
  import { Ref, ref } from 'vue';
  import {{ pascal_case }}Form from './{{kebab_case}}-form.vue';
  import { {{ pascal_case }}VO } from './{{kebab_case}}';

  const map: any = {
    table: {{ pascal_case }}Table,
    form: {{ pascal_case }}Form,
  };
  const currentComponent = ref({{ pascal_case }}Table);
  const id: Ref = ref('');
  const onSwitch = (component: any, value: {{ pascal_case }}VO) => {
    id.value = value ? value.id : undefined;
    currentComponent.value = map[component];
  };
</script>

<template>
  <div class="content">
    <transition name="fade" mode="out-in">
      <component :is="currentComponent" :id="id" @switch="onSwitch" />
    </transition>
  </div>
</template>

<style scoped lang="less">
  // fade styles!
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  .content {
    overflow: hidden;
    padding-bottom: 30px;
    min-height: calc(100vh - 220px);
  }
</style>
